<template>
  <div>
    <input type="file" ref="file" @change="sendPic" multiple class="file"> 
    <el-button type="text" @click="dialogVisible = true">点击上传图片</el-button>

    <el-dialog
      title="请选择要上传的图片"
      :visible.sync="dialogVisible"
      width="50%">
      <span>
        <el-button @click="choosePic">选择图片</el-button>
        <el-button @click="submit">提交</el-button>
      </span>
    </el-dialog>

   <el-table
    :data="nowPageList"
    style="width: 100%">
    <el-table-column
      label="名称"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.image_name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="大小"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.image_size }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="类型"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.image_type }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="缩略图"
      width="180">
      <template slot-scope="scope">
        <img :src="scope.row.image_path" alt="" class="image">
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination class="page"
      layout="prev, pager, next" 
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios"

axios.defaults.withCredentials = true;

export default {
    data: () => {
      return {
        formdata: {},
        imglist: [],
        image: '',
        dialogVisible: false,
        tableData: [],
        count: 0,
        total: 10,
        nowPageList: [],
        page: 1
      }  
    },
    async mounted() {
      let result = await this.$axios.post("/getList", {page: this.page});
      this.total = result.data.total;
      this.nowPageList = result.data.infoList;
    },
    methods: {
      async handleDelete(index, row) {
        let result = await this.$axios.post("/deleteImg", {name: row.image_name});
        console.log(result);
        this.tableData = result.data.infoList;
        this.nowPageList = result.data.infoList.slice((this.page - 1) * 10 , this.page * 10);
        this.total = result.data.infoList.length;
      },
      choosePic() {
        console.log(this.$refs);
        this.$refs.file.click();
      },
      sendPic(e) {
        let files = e.target.files;
        if(!files.length) return;
        let formdata = new FormData();
        if(files.length) {
          let i = 0;
          for(let item in files) {
            console.log(files[item]);
            formdata.append("image" + i , files[item]);
            i++
          }
        }
        this.formdata = formdata;
      },
      async submit() {
        console.log(this.formdata);
        if(this.formdata) {
          let result = await this.$axios.post("/sendPic", this.formdata, {headers: {'Content-Type': 'multipart/form-data'}});
          
          this.tableData = result.data.infoList;
          this.nowPageList = result.data.infoList.slice((this.page - 1) * 10 , this.page * 10);
          this.total = result.data.infoList.length;
          this.formdata = '';
        }
        this.dialogVisible = false
      },
      async handleCurrentChange(val) {
        let result = await this.$axios.post("/getList", {page: val});
        console.log(result.data);
        this.nowPageList = result.data.infoList;
        this.page = val;
      }
    },
    changeCount(params) {
      this.count = params
    } 
}
</script>

<style>
  .file {
    display: none;
  }
  .image {
    width: 100px;
    max-height: 100px;
  }
  .block {
    margin: auto;
    margin-top: 30px;
    width: 35%;
  }
  .page {
    margin-top: 50px;
    display: flex;
    justify-content: center;
  }
</style>